<template>
  <div>
    <el-table 
      :data="tableData" 
      stripe
      border 
      :header-cell-style="{backgroundColor:'#f5f7fa', color: '#333'}"
      >
      <el-table-column prop="teacher_id" label="工号" align="center"/>
      <el-table-column prop="name" label="姓名"  align="center"/>
      <el-table-column prop="gender" label="性别"  align="center"/>
      <el-table-column prop="phone" label="电话"  align="center">
        <template #default="scope">
          <span>{{ scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="is_head_teacher" label="是否班主任" align="center">
        <template #default="scope">
          <span>{{ scope.row.is_head_teacher ? '是' : '否'}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="editRow(scope.$index)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { getAllTeacher } from '@/api';
import { ref } from 'vue';

const tableData = ref([])

getAllTeacher().then(res => {
  // console.log(res)
  tableData.value = res
})

const editRow = (index) => {
  console.log(index)
}

const deleteRow = (index) => {
  console.log(index)
}
</script>

<style lang="scss" scoped>

</style>